<template>
  <z-form-item
    :label-col="{ style: { width: '100px', paddingRight: '6px' } }"
    :label="basicForm?.headText || '输入框'"
    class="z-form-item"
    :name="basicForm.field"
  >
    <z-input
      v-model:value="model[basicForm.field]"
      :placeholder="basicForm?.placeHolder"
    />
  </z-form-item>
</template>
<script>
import { defineComponent, toRef, watch, ref } from 'vue'
import { useStore } from 'vuex'
import IsShowMixin from '../../z-form-template/mixins/isShow'

export default defineComponent({
  name: 'InputItem',
  props: {
    basicProperty: {
      type: Object,
      default: undefined
    },
    formModel: {
      type: Object,
      default: undefined
    }
  },
  setup(props) {
    const store = useStore()

    const basicForm = toRef(props, 'basicProperty')
    const model = toRef(props, 'formModel')

    // // 初始化  组件  显隐
    let isShowmix = new IsShowMixin(basicForm, store, model)
    let isShow = ref(isShowmix.isShow)

    // 监听当前选择组件对象  赋值操作 显隐操作
    watch(() => store.getters.currentVal, () => isShowmix.watch((val) => {
      isShow.value = val
    }))

    return {
      basicForm,
      model,
      isShow
    }
  }
})
</script>
<style lang="less" scoped>
.z-form-item{
  flex: 1;
}
</style>
